<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<title>后台管理</title>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
	
		<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.3.9/css/fileinput.min.css" rel="stylesheet"/>
		
			<link rel="stylesheet" type="text/css" th:href="@{/css/backindex.css}"/>
		
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body th:inline="text">
		<div th:replace="back/cartoon :: leftbar"></div>

		<div class="content">
			<div th:replace="back/cartoon :: navbar"></div>
			
			<ol class="breadcrumb">
			  <li>当前位置：<a th:href="@{/admin/cartoon}">漫画管理</a></li>
			  <li><a th:href="@{/admin/chaptor(ctId=${cp.ctId})}">[[${cp.ctName}]]</a></li>
			  <li class="active" th:if="${cp.name!=null}">第[[${cp.cpId}]]章&nbsp;&nbsp;[[${cp.name}]]</li>
			  <li class="active" th:if="${cp.name==null}">新增章节</li>
			</ol>
			
			<div class="well">
				<div class="panel panel-default">
					<div class="panel-body">
						<form class="form-horizontal" method="post" th:action="@{/chaptor}" enctype="multipart/form-data"  data-toggle="validator" role="form" data-focus="false">
						  <div class="form-group">
						    <label class="col-sm-1 control-label">名称：</label>
						    <div class="col-sm-4">
						      <input type="text" class="form-control" name="name" th:value="${cp.name}" required="required" data-error="名称不能为空">
						    </div>
						    <div class="help-block with-errors col-xs-5"></div>
						  </div>
						  <div class="form-group">
						    <label class="col-sm-1 control-label">内容：</label>
						    <div class="col-sm-10">
						      <input id="file-3" name="pic" type="file" class="file-loading" multiple webkitdirectory>
						    </div>
						  </div>
						  <input name="_method" value="PUT" type="hidden" th:if="${cp.name!=null}"/>
						  <input name="id" th:value="${cp.id}" type="hidden" th:if="${cp.name!=null}"/>
						  <input type="hidden" name="cpId" th:value="${cp.cpId}">
						  <input type="hidden" name="ctId" th:value="${cp.ctId}">
  						<div class="form-group text-center">
						    <button type="submit" class="btn btn-primary" >提交</button>
						  </div>
						
						</form>
						  
							
						
					</div>
				</div>				
			</div>

		</div>
		
		
		
		
		<!-- jQuery -->
		<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
		
		<
		<script src="https://cdn.bootcss.com/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
		

		<script th:src="@{/js/backindex.js}" type="text/javascript"></script>
		
		<script src="https://cdn.bootcss.com/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.8/js/fileinput.min.js"></script>
		
		<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.9/js/locales/zh.min.js"></script>

		

		<script th:inline="javascript">
		$(document).ready(function() {
			var pics=[[${cp.pics}]]
			
			var config={
				language:'zh',
		        showCaption: false,
		        showUpload:false,
		        showClose:false,
		        browseLabel: '选择文件夹  ...',
		        fileType: ['jpg', 'png', 'gif'],
		        overwriteInitial: false,
		        initialPreview: [],
		        initialPreviewConfig: []	
			}
			
			if(pics!=null && pics.length!=0){
				config['initialPreview']= [
			        	[# th:each="a:${cp.pics}"]
			        	'<img src="[(${a.pgImg})]" class="file-preview-image" style="height:160px;">',
			        		
			        	[/]
			        ]
				
				config['initialPreviewConfig']=[
		        	[# th:each="a,aStatu:${cp.pics}"]
			       		 {
			                caption: 'page[[${aStatu.index+1}]].jpg', 
			                width: '120px', 
			                url: '/pic/delete',
			                extra: {id: [[${a.id}]]}
			             },
		       		[/]  
      			 ]
			}
			
			
			$("#file-3").fileinput(config);
			$('#file-3').fileinput('clear');
					    
			    
	} );
		</script>
	</body>
</html>